<template>
  <div id="complain">
    <div class="complain_contaner">
      <textarea
        class="complain_text"
        placeholder="请输入评论"
        v-model="detail"
      />
    <el-upload
      action="http://www.nineunity.com/nu/client/file/upload"
      list-type="picture-card"
      :on-remove="handleRemove"
      :on-success="successUpload"
      :headers="MyHeader"
      :before-upload="beforeAvatarUpload"
      class="complain_input_container"
    >
      <img src="./ic_Addpictures.png" class="complain_input">
    </el-upload>
    </div>
    <button class="complain_button" @click="submitComment()" >评论</button>
  </div>
</template>
<script>
import '../../css/layout.css'
//样式文件，需单独引入
import 'element-ui/lib/theme-chalk/index.css';
import '@/utils/rem.js';
import Goods from '_common/services/goods.js'
import { getCookie } from '@/utils/cookiesUtil.js'
import { getQuery } from '@/utils/utils'
import wxLogin from '_common/wxLogin.js'
export default {
  	name: 'comment',
  	data() {
  		return {
        // 用户投诉的问题～～
        detail: '',
        paths: [],
        MyHeader: {cAuthToken: getCookie('token')},
  		}
  	},
  	computed: {
  	},
  	methods: {
      handleRemove(file, fileList) {
        const url = file.response.data;
        if(this.paths.includes(url)) {
          this.paths.splice(this.paths.findIndex(item => {
                return item === url
            }), 1)
        }
      },
      successUpload(res, file, fileList) {
        if(res.code === 0) {
          this.$alertTip(res.msg || '图片上传成功');
          this.paths = this.paths.concat(res.data);
        }
        this.$alertTip(res.msg || '图片上传失败，请重新上传');
      },
      submitComment() {
        if (this.detail === '') {
          this.$alertTip('投诉信息不能为空！');
          return false;
        }
        Goods.postOrderComment({
          orderId: getQuery('goodsId'),
          detail: this.detail,
          paths: this.paths,
        }).then(res => {
        if(res.code === 0) {
          this.$alertTip('评价成功～ 感谢您购买九合科技产品');
          this.$openRouter({
            name: 'personalCenter',
          });
        } else {
          this.$alertTip(res.msg || '评价上传失败，请重新上传');
        }
        });
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$alertTip('上传图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$alertTip('上传图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }

    },
    async beforeMount() {
        await wxLogin(this.getData)
    },
    components: {
    }
}  
</script>

<style lang="less" scoped>

html {
  height: 100%;
  body {
    height: 100%;
    background-color: #f8f8f8;
    #complain {
      height: auto;
      .complain_contaner {
        background-color: white;
        height: 500px;
        width: 100%;
        padding: 32px;
        box-sizing: border-box;
        .complain_text {
          width: 100%;
          height: 200px;
          color: #cccccc;
          resize:none;
          border:none;
          // outline: none;
        }
        #fileImage {

        }
      }
      .complain_button {
        position: fixed;
        left: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 88px;
        font-size: 36px;
        font-weight: 500;
        color: white;
        background-color: #f3a13a;
        border: 1px solid transparent;  //自定义边框
        outline: none;    //消除默认点击蓝色边框效果
        &:hover {
          color: #fef5eb;
        }
      }
    }
  }
}
.el-upload--picture-card{
   border-width: 0 !important;
  .complain_input {
    width: 100%;
    height: 100%;
  }
}
     
</style>